<template>
  <div class="main">
    <el-card>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="礼品管理" name="first">
          <el-row gutter="12">
            <el-col span="6">
              <div class="gifname">
                <span>礼品名称</span>
                <div>
                  <el-input
                    placeholder="名称"
                    v-model="giftNameInput"
                  ></el-input>
                </div>
              </div>
            </el-col>
            <el-col span="6">
              <div class="gifname2">
                <span>礼品类别</span>
                <div>
                  <el-select placeholder="请选择礼品类别"></el-select>
                </div>
              </div>
            </el-col>
            <el-col span="4">
              <div class="buttons">
                <el-button>重置</el-button>
                <el-button type="primary" @click="findCard">查询</el-button>
              </div>
            </el-col>
          </el-row>
          <div :style="{ height: '15px' }"></div>
          <el-row>
            <el-col span="6">
              <div class="buttons2">
                <el-button
                  type="primary"
                  :icon="EditPen"
                  @click="addgiftDialogVisible = true"
                  >添加礼品</el-button
                >
                <el-button>礼品类别</el-button>
              </div>
            </el-col>
          </el-row>
          <div :style="{ width: '10px', height: '15px' }"></div>
          <el-row>
            <el-col v-for="(item, index) in gifts" :key="index" :span="4.5">
              <div :style="{ marginRight: '30px' }">
                <el-card :body-style="{ padding: '5px' }">
                  <div :style="{ width: '220px', height: '220px' }">
                    <img
                      src="https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg"
                      class="image"
                    />
                  </div>
                  <div style="padding: 10px">
                    <div class="info">
                      <div :style="{ display: 'flex', alignItems: 'center' }">
                        <img
                          :style="{
                            width: '15px',
                            height: '15px',
                            marginRight: '5px',
                          }"
                          src="https://bpic.588ku.com/element_origin_min_pic/19/06/15/65fa0d7e2d7492a09abdd7b7db550779.jpg"
                          alt=""
                        />
                        <span :style="{ color: '#E6A23C', fontSize: '28px' }">{{
                          item.integral
                        }}</span>
                      </div>
                      <div :style="{ fontSize: '12px', color: '#909399' }">
                        库存: {{ item.inventory }}
                      </div>
                    </div>
                    <div :style="{ marginTop: '15px', fontSize: '14px' }">
                      {{ item.name }}
                    </div>
                    <div class="bottom">
                      <el-button text class="button" type="primary" size="small"
                        >编辑</el-button
                      >
                      <el-button
                        text
                        class="button"
                        type="primary"
                        size="small"
                        @click="centerDialogVisible = true"
                        >删除</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <div :style="{ width: '10px', height: '18px' }"></div>
          <el-row>
            <el-col :offset="15">
              <el-pagination
                background
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="2"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <!-- 删除弹出框 -->
          <el-dialog
            v-model="centerDialogVisible"
            title="提示"
            width="30%"
            align-center
          >
            <span>确定删除此商品?</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteFn"> 确定 </el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 添加礼品弹出框 -->
          <el-dialog
            v-model="addgiftDialogVisible"
            title="添加礼品"
            width="40%"
            height="500px"
            align-center
          >
            <el-form :model="gift" label-width="75px" :rules="rules">
              <el-form-item label="礼品名称">
                <el-input v-model="gift.name" />
              </el-form-item>
              <el-form-item label="消耗积分">
                <el-input v-model="gift.integral" />
                <div :style="{ marginLeft: '35px' }">
                  <el-icon><InfoFilled /></el-icon>
                  <span :style="{ fontSize: '12px', color: '#ccc' }"
                    >学员在兑换此奖品时需要的积分数量</span
                  >
                </div>
              </el-form-item>

              <el-form-item label="库存数量">
                <el-input
                  v-model="gift.inventory"
                  :style="{ width: '200px' }"
                />
              </el-form-item>
              <el-form-item label="上传图片">
                <el-upload
                  class="avatar-uploader"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="礼品类别">
                <el-select placeholder="请选择礼品类别"></el-select>
              </el-form-item>
              <el-form-item label="礼品介绍">
                <el-input
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="介绍礼品"
                />
              </el-form-item>
              <el-form-item label="可兑数量">
                <div :style="{ width: '100%' }">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="可兑换数量"
                    clearable
                  />
                </div>
                <div :style="{ marginLeft: '35px' }">
                  <el-icon><InfoFilled /></el-icon>
                  <span :style="{ fontSize: '12px', color: '#ccc' }"
                    >每个学员最多可以兑换此礼品的数量，“0”则不限制</span
                  >
                </div>
              </el-form-item>
              <el-form-item label="允许兑换">
                <div :style="{ width: '100%' }">
                  <el-switch v-model="value2" class="ml-2" />
                </div>
                <div :style="{ marginLeft: '35px' }">
                  <el-icon><InfoFilled /></el-icon>
                  <span :style="{ fontSize: '12px', color: '#ccc' }"
                    >库存不足时是否允许兑换此礼品</span
                  >
                </div>
              </el-form-item>
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addgiftDialogVisible = false"
                  >取消</el-button
                >
                <el-button type="primary" @click="addFn"> 确定 </el-button>
              </span>
            </template>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="兑换记录" name="second">兑换记录</el-tab-pane>
        <el-tab-pane label="兑换处理" name="third">兑换处理</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { EditPen, InfoFilled, Plus } from "@element-plus/icons-vue";
const activeName = ref("first");

const gifts = ref([
  {
    name: "早睡卡",
    integral: "1",
    inventory: "89",
    image:
      "https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg",
  },
  {
    name: "学习卡",
    integral: "10",
    inventory: "28",
    image:
      "https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg",
  },
]);

const gifts2 = [
  {
    name: "早睡卡",
    integral: "1",
    inventory: "89",
    image:
      "https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg",
  },
  {
    name: "学习卡",
    integral: "10",
    inventory: "28",
    image:
      "https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg",
  },
];

//删除卡片
const centerDialogVisible = ref(false);

const deleteFn = (index) => {
  gifts.value.splice(index, 1);
  centerDialogVisible.value = false;
};

//添加卡片
const addgiftDialogVisible = ref(false);
const gift = ref([
  {
    name: "",
    integral: "",
    inventory: "",
    image:
      "https://cbu01.alicdn.com/img/ibank/2018/387/973/9105379783_1330830382.jpg",
  },
]);

const addFn = (row) => {
  console.log("gift", gift.value);
  gifts.value.push(gift.value);
  addgiftDialogVisible.value = false;
};

//查询
const giftNameInput = ref(null);
const findCard = () => {
  console.log(giftNameInput.value);
  let res = gifts2.filter((item) => {
    return item.name == giftNameInput.value;
  });
  console.log(res);
  gifts.value = res;
};
</script>

<style lang="scss" scoped>
.main {
  padding: 10px;
}
.gifname {
  display: flex;
  align-items: center;
  span {
    display: block;
  }
  div {
    width: 200px;
    margin-left: 7px;
  }
}
.gifname2 {
  display: flex;
  align-items: center;
  margin-left: 10px;
  span {
    display: block;
  }
  div {
    width: 180px;
    margin-left: 7px;
  }
}
::v-deep .el-input__inner {
  height: 28px;
  line-height: 28px;
}
.buttons2 {
  margin-top: 8px;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-dialog__body {
  max-height: 450px;
  overflow-y: auto;
  border-top: 1px solid #e8e8e899;
  border-bottom: 1px solid #e8e8e899;
}

.avatar-uploader .avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  text-align: center;
}
</style>